<template>
  <one-mask class="koi-modal" @input="close(-1)" :showMask.sync="visable" :class="customClass">
    <div class="koi-modal-box">
      <div class="koi-modal-close" v-show="closeIcon" @click="close(-2)">
        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 27 27">
          <path fill="#b2b2b2" fill-rule="evenodd"
            d="M15.937 13.962l10.678 10.679a1.396 1.396 0 1 1-1.974 1.974L13.962 15.937 3.315 26.584a1.396 1.396 0 1 1-1.974-1.975l10.647-10.647L1.34 3.315a1.396 1.396 0 1 1 1.974-1.974l10.647 10.647L24.61 1.34a1.396 1.396 0 1 1 1.975 1.974L15.937 13.962z">
          </path>
        </svg>
      </div>
      <div class="koi-modal-title" v-show="title !== ''" v-html="title"></div>
      <div class="koi-modal-context" v-html="message"></div>
      <div class="koi-modal-btnc" v-show="buttons.length > 0">
        <div v-for="(btn,i) in buttons" :key="i" class="koi-modal-btn" :class="{'koi-modal-btn-light':btn.isLight}" @click="close(i)" v-html="btn.text"></div>
      </div>
    </div>
  </one-mask>
</template>

<style lang="less">
.koi-modal {
  // @border-1 定义一个变量
  @border-1: 1px solid rgba(0, 0, 0, 0.1); // 内容
  z-index: 20000;
  &-box {
    position: relative;
    text-align: center;
    font-style: normal;
    max-width: 90%;
    min-width: 280px;
    border-radius: 5px;
    overflow: hidden;
    background-color: #ffffff;
    min-height: 50px;
    margin: 0 auto;
  } // 关闭icon
  &-close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 15px;
  } // 标题
  &-title {
    padding: 16px 6px 0 6px;
    min-height: 18px;
    line-height: 18px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  } // 消息内容
  &-context {
    padding: 20px 16px;
    min-height: 18px;
    line-height: 18px;
    word-break: break-all;
  } // 按钮区域
  &-btnc {
    border-top: @border-1;
    display: flex;
    width: 100%;
  } // 按钮
  &-btn {
    flex: 1;
    text-align: center;
    line-height: 45px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    border-left: @border-1;
    &:first-child {
      border-left: none;
    } // 按钮高亮
    &-light {
      color: #00b358;
    }
  }
}
</style>

<script>
export default {
  props: {
    // 弹窗消息
    message: String,
    // 自定义 class
    customClass: {
      type: String,
      default: ''
    },
    // 点击蒙版，触发关闭弹窗
    maskHide: {
      type: Boolean,
      default: true
    },
    // 弹窗 标题
    title: {
      type: String,
      default: ''
    },
    // 弹窗按钮数组
    buttons: {
      type: Array,
      default() {
        return []
      }
    },
    // 关闭icon
    closeIcon: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 弹窗是否可见
      visable: false,
      // 设置是否可以 销毁弹窗
      // 作为零时的变量
      canClose: true
    }
  },
  methods: {
    // 关闭弹窗方法
    // index 是按钮的 index 值
    close: function(index) {
      if (!this.maskHide && index == -1) {
        return
      }
      // 实际触发事件，index 为序号 + 1
      this.$emit('close', index + 1)
      if (this.canClose) {
        this.visable = false
      }
    }
  },

  mounted: function() {}
}
</script>
